import { defineComponent, h, ref, watch } from 'vue'
import { randomString } from '/@/utils/common/compUtils'
import '../style/reload-effect.less'

// 修改数据特效
export default defineComponent({
  props: {
    vNode: null,
    // 是否启用特效
    effect: Boolean,
  },
  emits: ['effectBegin', 'effectEnd'],
  setup(props, { emit }) {
    // vNode: null,
    const innerEffect = ref(props.effect)
    // 应付同时多个特效
    const effectIdx = ref(0)
    const effectList = ref<any[]>([])

    watch(() => props.effect, () => innerEffect.value = props.effect)
    watch(() => props.vNode, (_vNode, old) => {
      if (props.effect && old != null) {
        let topLayer = renderSpan(old, 'top')
        effectList.value.push(topLayer)
      }
    }, { deep: true, immediate: true })

    // 条件渲染内容 span
    function renderVNode() {
      if (props.vNode == null) {
        return null
      }
      let bottom = renderSpan(props.vNode, 'bottom')
      // 启用了特效，并且有旧数据，就渲染特效顶层
      if (innerEffect.value && effectList.value.length > 0) {
        emit('effectBegin')
        // 1.4s 以后关闭特效
        window.setTimeout(() => {
          let item = effectList.value[effectIdx.value]
          if (item && item.elm) {
            // 特效结束后，展示先把 display 设为 none，而不是直接删掉该元素，
            // 目的是为了防止页面重新渲染，导致动画重置
            item.elm.style.display = 'none'
          }
          // 当所有的层级动画都结束时，再删掉所有元素
          if (++effectIdx.value === effectList.value.length) {
            innerEffect.value = false
            effectIdx.value = 0
            effectList.value = []
            emit('effectEnd')
          }
        }, 1400)
        return [effectList.value, bottom]
      } else {
        return bottom
      }
    }

    // 渲染内容 span
    function renderSpan(vNode, layer) {
      let options = {
        key: layer + effectIdx.value + randomString(6),
        class: ['j-vxe-reload-effect-span', `layer-${layer}`],
        style: {},
      }
      if (layer === 'top') {
        // 最新渲染的在下面
        options.style['z-index'] = (9999 - effectIdx.value)
      }
      return h('span', options, [vNode])
    }

    return () => h('div', {
      class: ['j-vxe-reload-effect-box'],
    }, [renderVNode()])
  },
})